<template>
	<view class="mix-get-code" @click="getCode" style="top:-100px;margin-top:-20px;">
		<view v-if="loading" class="loading">
			<mix-icon-loading size="28rpx" color="#0083ff"></mix-icon-loading>
		</view>
		<text class="text" :class="{disabled: timeDown > 0}" style="top:-100px;margin-top:40px;">
			{{ timeDown > 0 ? $t('clogin.msg.regetccode')+':' + timeDown + 's' : $t('clogin.label.getccode') }}
		</text>
	</view>
</template>
 
<script>
	/**
	 * 手机验证码
	 * @prop mobile 手机号
	 * @prop templateCode 短信模版id
	 */
	//import clogin from '@/static/assets/clogin/js/clogin.js'
	import {checkStr,throttle,msg} from '@/static/assets/csm/js/util'
	import mixiconloading from '@/pages/clogin/components/mix-icon-loading.vue'
	
	export default {
		//获取手机验证码
		name: 'MixMobileCode',
		data() {
			return {
				loading: false,
				timeDown: ''
			}
		},
		components:{
		  'mix-icon-loading':mixiconloading
		},
		props: {
			mobile: {
				type: String,
				default: ''
			},
			templateCode: { 
				type: String,
				default: ''
			},
		},
		methods: {
			//获取验证码
			async getCode(){
				let that = this;
				if(this.timeDown > 0){
					return;
				}
				throttle(()=>{
					const mobile = that.mobile;
					console.log('mobile',mobile);
					if(!checkStr(mobile, 'mobile')){
						msg(that.$t('clogin.msg.incorrectmobile'));
						return;
					}
					that.loading = true;	
					that.$u.clogin.unirequest("/sms/send", {
						mobile:mobile,
						event:that.templateCode
					}, function(res) {
						that.$u.c.showToast(res.msg);
						that.loading = false;
						that.countDown(60);
					},function(res){
						that.$u.c.showToast(res.msg);
						that.loading = false;					
					});								
				}, 2000)
			},
			//倒计时
			countDown(timer){
				timer --;
				this.timeDown = timer;
				if(timer > 0){
					setTimeout(()=>{
						this.countDown(timer);
					}, 1000)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.mix-get-code{
		flex-shrink: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 36rpx;
		
		&:before{
			content: '';
			width: 0;
			height: 40;
			border-right: 1px solid #f0f0f0;
		}
		.loading{
			margin-right: 8rpx;
		}
		.text{
			line-height: 28rpx;
			font-size: 26rpx;
			color: #40a2ff;
			
			&.disabled{
				color: #ccc;
			}
		}
	}
</style>
